<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>角色管理</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
    <link rel="stylesheet" href="../../../static/zTree/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../../static/dtree/dtree.css">
</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <!--
                                                <etom:auth userPermissions="test">删除</etom:auth>
                        -->
                        <label class="layui-form-label w-auto">搜索：</label>
                        <div class="layui-input-inline mr0">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <!-- 搜索条件隐藏域 -->
                        <input type="hidden" id="s_edtSearch">
                            <button id="btnAdd" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a>
</script>
<!-- 操作日志 -->
<script type="text/html" id="dialogLogTable">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-table" id="logTable" lay-filter="logTable"></table>
            </div>
        </div>
    </div>
</script>
<!-- 导入 -->
<script type="text/html" id="dialogOplog">
    <form id="oplogForm" class="layui-form model-form" lay-filter="oplogForm">
        <div class="layui-form-item">
            <label class="layui-form-label">数据重复时:</label>
            <div class="layui-input-block">
                <input class="repeat" type="radio" name="repeat" value="skip" title="跳过" checked/>
                <input class="repeat" type="radio" name="repeat" value="cover" title="覆盖"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">导入出错时:</label>
            <div class="layui-input-block">
                <input class="error" type="radio" name="error" value="run" title="跳过错误继续导入" checked/>
                <input class="error" type="radio" name="error" value="stop" title="停止导入"/>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-btn" lay-filter="btnOplog" id="btnOplog" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 添加角色 -->
<script type="text/html" id="dialogAdd">
    <form id="roleForm" class="layui-form model-form" lay-filter="roleForm">
        <input name="id" placeholder="请输入角色名" type="hidden" class="layui-input" maxlength="20">
        <div class="layui-form-item ">
            <label class="layui-form-label required" >角色名</label>
            <div class="layui-input-block">
                <input name="roleName" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-btn" id="formSubmit" lay-filter="formSubmit" lay-submit="">保存</button>
        </div>
    </form>
</script>
<!--权限分配-->
<script type="text/html" id="roleAuth">
    <div style="height: 350px;overflow-y: auto;overflow-x: hidden;">
        <input id="roleId" type="hidden" value="3">
        <ul id="treeAuth" class="ztree" style="padding: 20px 0px 20px 40px;"></ul>
    </div>
    <!-- <div class="text-right" style="padding-top: 10px;padding-right: 25px;margin-bottom: 15px;">
         <button id="btnCancel " class="layui-btn layui-btn-primary" ew-event="closeDialog">取消</button>
         <button id="btnSave" class="layui-btn">保存</button>
     </div>-->
</script>


</body>
<script src="../../../static/js/jquery-1.11.0.min.js"></script>
<script src="../../../static/libs/layui/layui.js"></script>
<script src="../../../static/js/common.js"></script>
<script src="../../../static/zTree/js/jquery.ztree.all.min.js"></script>
<script src="../../../static/dtree/dtree.js"></script>
<script>
    layui.use(["form","layer","table","upload","admin"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var upload = layui.upload;
        var admin = layui.admin;
        var $ = layui.jquery;
        var ctx = "";
        //渲染表格
        var insTb = table.render({
            elem: '#roleTable',
            url: 'sysPermissionsController/getRoleList',
            page: true,
            cellMinWidth: 100,
            cols: [
                [{
                    type: 'numbers'
                },
                    {
                        field: 'roleName',
                        sort: true,
                        title: '角色名'
                    },
                    {
                        fixed:'right',
                        align: 'center',
                        toolbar: '#tableBar',
                        title: '操作',
                        minWidth: 250
                    }

                ]
            ]
        });
        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var content = $('#edtSearch').val();
            // 赋值搜索条件隐藏域
            $('#s_edtSearch').val(content);
            table.reload('roleTable', {
                where: {
                    role_name: content
                },
                page:{
                    curr:1
                }
            });
        });
        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });
        // 工具条点击事件
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { //删除
                doDelete(obj);
            } else if (obj.event === 'auth') { // 权限管理
                var  id = obj.data.id
                showPermDialog(id);
            }else if (obj.event === 'view') { // 权限管理
                showEditModel(data,true);
            }
        });
        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                skin: 'layui-admin-skin',
            }, function (index) {
                layer.close(index);
                layer.load(2);
                $.get(ctx+'/sysPermissionsController/deleteRole', {
                    id: obj.data.id
                }, function (data) {
                    layer.closeAll('loading');
                    if (data.success) {
                        layer.msg(data.msg, {
                            icon: 1
                        });
                        layer.close(index)
                        insTb.reload({})
                    } else {
                        layer.msg(data.msg, {
                            icon: 2
                        });
                        layer.close(index)
                    }
                }, 'json');
            });
        }


        // 显示编辑弹窗
        function showEditModel(data,view) {
            admin.putTempData('t_role', data);
            admin.putTempData('formOk', false);
            var url = ctx+'/sysPermissionsController/insertRole'; //实际项目为添加的url
            layer.open({
                type: 1,
                skin: 'layui-admin-skin',
                title:view?'查看角色': data ? '修改角色' : '添加角色',
                btn: view?[]:['确定', '取消'],
                shade: [0.1, '#000'],
                maxmin: true,
                content: $("#dialogAdd").html(),
                success:function(layero,dIndex) {
                    form.render();
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');

                    // 回显数据
                    var role = admin.getTempData('t_role');
                    if (role) {
                        url = ctx+'/sysPermissionsController/updateRole'; // 实际项目为修改的url
                        form.val('roleForm', role);
                    }
                    //查看时，状态都为不可编辑
                    if(view){
                        $('#roleForm input').attr('disabled', 'disabled');
                        $('#roleForm textarea').attr('disabled', 'disabled');
                        $('#roleForm select').attr('disabled', 'disabled');
                        $('#roleForm input').addClass('layui-disabled');
                        $('#roleForm textarea').addClass('layui-disabled');
                        $('#roleForm select').addClass('layui-disabled');
                    }
                },
                yes:function (layero,dIndex) {
                    // 表单提交事件
                    form.on('submit(formSubmit)', function (data) {
                        layer.load(2);
                        $.get(url, data.field, function (res) {
                            layer.closeAll('loading');
                            if (res.success) {
                                layer.close(layero);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({}, 'data');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                    $("#formSubmit").trigger("click");
                }
            });
        }
        // 权限管理
        function showPermDialog(roleId) {
            layer.open({
                type: 1,
                skin: 'layui-admin-skin',
                title: '角色权限分配',
                area: ['360px', '463px'],
                btn: ['确定', '取消'],
                maxmin: true,
                shade: [0.1, '#000'],
                content:  $("#roleAuth").html(),
                success:function(layero,dIndex) {
                    layui.use(['layer'],function(){
                        var $ = layui.jquery;
                        var layer = layui.layer;
                        var admin = layui.admin;

                        layer.load(2);
                        var setting = {
                            check: {enable: true},
                            data: {
                                simpleData: {
                                    enable: true,
                                    idKey: "id",
                                    pIdKey:"parentId",
                                },
                                key:{
                                    name:"title"
                                }
                            }
                        };
                        $.get(ctx+'/sysPermissionsController/getPermissions', {
                            roleId: roleId
                        }, function (data) {
                            $.fn.zTree.init($('#treeAuth'), setting, data.data);
                            layer.closeAll('loading');
                          /*  if (data.success){

                            } else {
                                layer.closeAll('loading');
                                $("#treeAuth").append("用户权限不足")
                                layer.msg(data.msg, {
                                    icon: 2
                                });
                            }*/

                        }, 'json');
                        /* 保存点击按钮 */
                        $('#btnSave').click(function () {

                        });
                        admin.iframeAuto(); // 让当前iframe弹层高度适应
                        function GetQueryString(name)
                        {
                            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                            var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                            if(r!=null)return  unescape(r[2]); return null;
                        }
                    })
                },  yes:function (layero,dIndex) {
                    layer.load(2);
                    var treeObj = $.fn.zTree.getZTreeObj('treeAuth');
                    //获取checkbox修改的值
                    var nodes = treeObj.getChangeCheckedNodes();
                    var data = new Array();
                    var needData = {}
                    for (var i = 0; i < nodes.length; i++) {
                        needData.pk_role_menu = nodes[i].menuRoleId
                        if (nodes[i].checked){
                            needData.checked = 1
                        } else {
                            needData.checked = 0
                        }
                        data.push(needData)
                        needData = {}
                    }
                    $.post(ctx+'/sysPermissionsController/updatePermissions', {
                        nodesData:JSON.stringify(data)
                    }, function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            layer.msg(data.msg, {icon: 1});
                            // 关闭当前iframe弹出层
                            layer.close(layero)
                        } else {
                            admin.closeThisDialog();
                            layer.msg(data.msg, {icon: 2});
                        }
                    }, 'json');
                }
            });
        }
    })
</script>
</html>